<template>
  <el-dialog :visible="showVisible" center :show-close="false" width="900px">
    <div class="b g3 f16 tl" slot="title">
      <div class="ks-row-between pl15 pr15">
        <span>{{ isNew ? "新建监听" : "编辑监听" }}</span>
        <span class="el-icon-close g9 f26 poi" @click="close"></span>
      </div>
    </div>
    <div class="pl30 pr30">
      <el-form
        label-position="top"
        :model="formData"
        ref="form"
        label-width="120px"
      >
        <el-form-item
          label="MQTT"
          prop="mqttKey"
          :rules="[
            {
              required: true,
              message: 'MQTT不能为空',
              trigger: 'change',
            },
          ]"
        >
          <el-select
            :disabled="!isNew"
            style="width: 100%"
            v-model="formData.mqttKey"
            filterable
          >
            <el-option
              v-for="item in mqttList"
              :key="item.key"
              :value="item.key"
              :label="item.key + '(' + item.name + ')'"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="TOPIC"
          prop="topic"
          :rules="[
            {
              required: true,
              message: 'TOPIC不能为空',
              trigger: 'change',
            },
            {
              pattern: TOPIC_REG,
              message: '请输入有效的TOPIC',
              trigger: 'change',
            },
          ]"
        >
          <el-input
            :disabled="!isNew"
            v-model="formData.topic"
            placeholder="请输入TOPIC"
            :maxlength="200"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item
          label="脚本"
          prop="scriptCode"
          :rules="[
            {
              required: true,
              message: '请选择脚本',
              trigger: 'change',
            },
          ]"
        >
          <tree-select
            v-model="formData.scriptCode"
            filterable
            :fieldMap="{
              value: 'code',
              label: 'name',
              disabled: 'disabled',
            }"
            :filterNodeMethod="filterNodeMethod"
            :treeData="scriptList"
          />
        </el-form-item>
        <el-form-item label="监听描述">
          <el-input
            type="textarea"
            v-model="formData.notes"
            placeholder="请输入监听描述"
            :maxlength="200"
            show-word-limit
          />
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="tr">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { TOPIC_REG } from "@/utils/reg"
import {
  createScriptTreeNode,
  filterNodeMethod,
} from "@/utils/treeSelectFormat"
import {
  postHmmqttsubscription,
  putHmmqttsubscription,
} from "@/apis/paas/HmMqttSubscriptionController.js"
import { getHmscriptfolderListTree } from "@/apis/paas/HmScriptFolderController.js"
import { getHmmqttSelectlist } from "@/apis/paas/HmMqttLinkController.js"
export default {
  name: "MqttSubscriptionForm",
  data() {
    return {
      TOPIC_REG,
      filterNodeMethod,
      showVisible: false,
      formData: {},
      callback: () => {},
      scriptList: [],
      mqttList: [],
      scriptLoading: false,
    }
  },
  computed: {
    isNew() {
      return !this.formData.id
    },
  },
  methods: {
    open(data = {}, callback) {
      this.showVisible = true
      this.callback = callback
      this.formData = {
        ...data,
      }
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
      this.getHmscriptList()
      this.getMqttList()
    },
    close() {
      this.showVisible = false
    },
    async submit() {
      this.$refs.form.validate().then((res) => {
        const { id, mqttKey, notes, scriptCode, topic } = this.formData
        let params = {}
        let request = null
        if (this.isNew) {
          request = postHmmqttsubscription
          params = { mqttKey, notes, scriptCode, topic }
        } else {
          request = putHmmqttsubscription
          params = { id, mqttKey, notes, scriptCode, topic }
        }
        for (const key in params) {
          params[key] =
            typeof params[key] === "string" ? params[key].trim() : params[key]
        }
        request(params).then((res) => {
          this.close()
          this.callback()
        })
      })
    },
    getHmscriptList() {
      this.scriptLoading = true
      getHmscriptfolderListTree()
        .then((res) => {
          res.forEach((node) => {
            node.type = "folder"
          })
          this.scriptList = createScriptTreeNode(res || [])
        })
        .finally(() => {
          this.scriptLoading = false
        })
    },
    getMqttList() {
      getHmmqttSelectlist().then((res) => {
        this.mqttList = res
      })
    },
  },
}
</script>
